<template>

<el-container class="home-container">
    <!-- 头部 -->
    <el-header>
        <div>
            <span>后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 主体容器 -->
    <el-container>
        <!-- 侧边栏 -->
        <el-row class="tac">
  <el-col :span="12">
    <h5>默认颜色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="12">
    <h5>自定义颜色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>
</el-container>

</template>
<script>
export default {
    data() {
        return {
         //左侧菜单的数据
        menuList:[],
        icons:{
            '125':'iconfont icon-user',
            '103':'iconfont icon-tijikongjian',
            '101':'iconfont icon-shangpin',
            '102':'iconfont icon-danju',
            '145':'iconfont icon-baobiao',
            },
            //表示不折叠
            isCollapse:false,
            activePath:''
        }
    },
    created() {
        this.getMenuList()
        //从sessionStorage中获取到activePath并赋值给属性activePath
        this.activePath = window.sessionStorage.getItem('activePath')
       
    },
    methods: {
        logout(){
            //清除sessionStorage中的数据(token)
            window.sessionStorage.clear();
            this.$router.push('/login')
        },
        async getMenuList(){
            //需要向后台发送axios请求获取数组
            const {data:res} = await this.$http.get('menus')
            //判断数据是否获取到了
            if(res.meta.status!==200) return this.$message.error(res.meta.msg)
            this.menuList = res.data
            console.log(res)
        },
        toggleCollapse(){
            //处理菜单的折叠效果
            this.isCollapse = !this.isCollapse
        },
        //链接的激活状态
        navState(path){
            window.sessionStorage.setItem('activePath',path)
        }

    },
}
</script>

<style lang="less" scoped>
    .home-container {
        height: 100%;
    }
    .el-header {
        background-color: #303133;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #ffffff;
        font-size: 20px;
        > div {
            display: flex;
            align-items: center;
            span {
                margin-left: 15px;
            }
        }
    }
    .el-aside {
        background-color: #606266;
        .el-menu{
            border-right: none;
        }
    }
    .el-main {
        background-color: #DCDFE6;
    }
    .iconfont{
        margin-right: 12px;
    }

    .toggle-btn{
        background-color: #909399;
        font-size: 10px;
        color: #ffffff;
        letter-spacing: 2px;
        text-align: center;
        line-height: 22px;
        cursor: pointer;
    }
</style>

